<template>
	<div style="position: relative;">
		<el-card shadow="hover">
			<GoBack @back="goBack" />
			<div class="pa40">
				<el-form ref="form" :model="formData.data" :rules="formData.rules" label-width="110px">
					<el-form-item ref="name" label="分类名称" prop="name">
						<el-input v-model.trim="formData.data.name" style="width: 70%;" maxlength="10" show-word-limit placeholder="请输入分类名称" />
					</el-form-item>
					<el-form-item ref="sort" label="分类顺序" prop="sort">
						<el-input v-model.trim="formData.data.sort" style="width: 70%;" placeholder="顺序" @input="filterNum" />
					</el-form-item>
					<el-form-item ref="state" label="是否显示" prop="state">
						<el-radio-group v-model="formData.data.state">
							<el-radio :label="1">显示</el-radio>
							<el-radio :label="2">不显示</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item ref="pic" label="类别图标" prop="pic"><UploadImage :fileUrl="formData.data.pic" @input="getPicUrl('pic', $event)" /></el-form-item>
					<el-form-item ref="keywords" label="关键字" prop="keywords"><addTags v-model:tags="formData.data.keywords"></addTags></el-form-item>
					<el-form-item ref="desc" label="类别描述" prop="desc">
						<el-input
							v-model.trim="formData.data.desc"
							placeholder="填写点什么吧"
							style="width: 70%;"
							type="textarea"
							:autosize="{ minRows: 3, maxRows: 10 }"
							maxlength="100"
							show-word-limit
						/>
					</el-form-item>
					<el-form-item><el-button :loading="formData.loading" type="primary" @click="onSubmit">完成</el-button></el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import GoBack from '/@/components/GoBack/index.vue'
import UploadImage from '/@/components/UploadImage/index.vue'
import addTags from '/@/components/addTags/index.vue'
import { ElMessage } from 'element-plus'
import { defaultGoodTypeData, getCategoryById, addCategory, updateCategory } from '/@/api/good'
import scrollForm from '/@/utils/scrollForm'
import Base64 from '/@/utils/base64'
import { verifiyNumberInteger } from '/@/utils/toolsValidate'

export default defineComponent({
	name: 'goBack',
	components: { GoBack, UploadImage, addTags },
	setup() {
		const router = useRouter()
		const route = useRoute()

		const refs: any = reactive({
			form: null,
			name: null
		})

		const state: any = reactive({
			routeInfo: {},
			formData: {
				data: JSON.parse(JSON.stringify(defaultGoodTypeData)),
				loading: false,
				rules: {
					name: [{ required: true, message: '请输入分类名称,1-10个字符', trigger: 'blur' }]
				}
			}
		})

		const goBack = () => {
			router.push({
				path: '/good/goodType',
				query: {}
			})
		}

		// 正整数
		const filterNum = (val: string) => {
			state.formData.data.order = verifiyNumberInteger(val)
		}

		// 获得图片路径
		const getPicUrl = (field, val) => {
			if (typeof val === 'string') state.formData.data[field] = val
		}

		const onSubmit = () => {
			console.log(state.formData.data)
			refs.form.validate(async (valid: boolean, object: object) => {
				if (valid) {
					state.formData.loading = true

					if (state.routeInfo.type === 'add') {
						await addCategory(state.formData.data).finally(() => {
							state.formData.loading = false
						})
						ElMessage.success('新增成功！')
					} else {
						await updateCategory(state.formData.data).finally(() => {
							state.formData.loading = false
						})
						ElMessage.success('编辑成功！')
					}

					router.push({
						path: '/good/goodType',
						query: {}
					})
				} else {
					scrollForm(refs, object)
				}
			})
		}

		// 页面加载时
		onMounted(() => {
			state.routeInfo = Base64(route.query.info, 2)
			console.log(state.routeInfo)

			//给pid赋值
			state.formData.data.pid = state.routeInfo.pid

			if (state.routeInfo.type === 'edit') {
				getCategoryById({ id: state.routeInfo.id }).then(res => {
					const { datas } = res
					state.formData.data = datas
				})
			}
		})
		return {
			goBack,
			filterNum,
			getPicUrl,
			onSubmit,
			...toRefs(refs),
			...toRefs(state)
		}
	}
})
</script>

<style></style>
